<template>
  <div class="add-form">
    <el-dialog
      title="创建权限组"
      :visible.sync="addPermissionVisible"
      @close="closeDialog"
    >
      <el-form
        :model="addPermissionForm"
        :rules="addPermissionFormRules"
        ref="addPermissionFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="用户名"
          prop="title"
        >
          <el-input v-model="addPermissionForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <!-- 树形表格 -->
          <el-tree
            ref="treeRef"
            :data="treeData"
            :props="treeProps"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[1]"
          ></el-tree>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="$emit('close')">取 消</el-button>
        <el-button
          type="primary"
          @click="addPermissionsList"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list as getPermissions } from '@/api/base/menus'
import { add as addPermissions } from '@/api/base/permissions.js'
export default {
  name: 'usersAdd',
  data () {
    return {
      addPermissionVisible: false,
      addPermissionForm: {
        title: '',
        permissions: [] // 选中菜单的id
      },
      addPermissionFormRules:
        { title: [{ required: true, message: '请输入用户名' }] }, // 验证规则
      treeData: [], // 属性表的数据
      treeProps: {
        children: 'childs',
        label: 'title'
      }
    }
  },
  created () {
    this.getPermissionsList()
  },
  methods: {
    // 获取权限树数据列表
    async getPermissionsList () {
      const { data } = await getPermissions()
      // console.log(data)
      // 将返回数据中的points换成childs
      const str = JSON.stringify(data)
      // console.log(str)
      const newStr = str.replace(/points/g, 'childs')
      const newData = JSON.parse(newStr)
      const results = {
        id: 1,
        title: '系统菜单和页面权限点',
        childs: [...newData]
      }
      // console.log(results)
      this.treeData.push(results)
      this.addPermissionVisible = true
    },
    // 添加权限组
    async addPermissionsList () {
      // 获取半选或者全选的id，获取到引用对象，调用element给提供的方法，获取到id
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      this.addPermissionForm.permissions = keys
      try {
        this.$refs.addPermissionFormRef.validate(async (valid) => {
          if (!valid) {
            return
          }
          await addPermissions(this.addPermissionForm)
          this.$emit('close')
        })
      } catch (error) {
        console.log(error)
        this.$message.error('添加失败')
      }
    },
    // 重置表单
    closeDialog () {
      this.$refs.addPermissionFormRef.resetFields()
      this.$emit('close')
    }
  }
}
</script>

<style>
.demo-ruleForm {
  width: 400px;
  margin-left: 120px;
}
</style>
